import React, { Component } from 'react';
import styled from 'styled-components'
import Swiper from 'swiper'
import NameProduct from '../name_product/index'
const Container= styled.div`
#swiper1 {
    width: 100%;
    height: 1.5352rem;
    .swiper-slide{
        img{
            width: 100%;
            height: 1.5352rem;
        }
    }
    .swiper-pagination-bullet-active{
        background:#ed145b
    }
}  
.shop_youhui{
    margin-bottom:.08rem;
    p{
        background:#fff;
        height:.4rem;
        text-align:center;
        line-height:.4rem;
        .firstspan{
            display:inline-block
            height:100%;
            margin-right:.13rem;
            line-height:.4rem;
            vertical-align:middle
            img{
               width:.15rem;
           }
        }
        span{
           vertical-align:middle
           font-size: 14px;
           color: #333;
           font-weight: 400;
        }
    }
    .imgbox1{
        height:1.88rem;
        img{
            height:1.88rem;
        }
    }
}
.activity{
    background:#fff;
        height:.4rem;
        text-align:center;
        line-height:.4rem;
        .firstspan{
            display:inline-block
            height:100%;
            margin-right:.13rem;
            line-height:.4rem;
            vertical-align:middle
            img{
               width:.15rem;
           }
        }
        span{
           vertical-align:middle
           font-size: 14px;
           color: #333;
           font-weight: 400;
        }
}
`
class Luxury extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    componentDidMount(){
        setTimeout(() => {
            this.mySwiper = new Swiper ('#swiper1', {
                loop: true, // 循环模式选项
                // 如果需要分页器
                pagination: {
                  el: '.swiper-pagination',
                },
            
              })        
        }, 0);
    }
    render() {
        return (
            <Container>
                <div className="swiper-container" id="swiper1">
                    <div className="swiper-wrapper">
                        <div className="swiper-slide">
                            <img src='http://mp6.jmstatic.com/mobile/card_material/item_562_2048_838-ipad2048_1566901163.jpeg?imageView2/2/w/640/q/90' alt='显示错误'></img>
                        </div>
                        <div className="swiper-slide">
                            <img src='http://mp5.jmstatic.com/mobile/card_material/item_562_2048_838-ipad2048_1566901185.jpeg?imageView2/2/w/640/q/90' alt='显示错误'></img>
                        </div>
                    </div>
                    {/* <!-- 如果需要分页器 --> */}
                    <div className="swiper-pagination"></div>
                    
                </div>
                <div className='shop_youhui'>
                    <p>
                        <span className='firstspan'><img src='/img/icon_title.png'></img></span>
                        <span>今日特惠</span>
                    </p>
                    <div className='imgbox1'>
                        <img src='http://mp6.jmstatic.com/mobile/card_material/item_1654_2048_1024-ipad2048_1566902029.jpeg?imageView2/2/w/640/q/90'></img>
                    </div>
                </div>
                <div className='shop_youhui'>
                    <p>
                        <span className='firstspan'><img src='/img/icon_title.png'></img></span>
                        <span>活动推荐</span>
                    </p>
                    <div className='imgbox1'>
                        <img src='http://mp5.jmstatic.com/mobile/card_material/item_2835_2048_1024-ipad2048_1566807840.jpeg?imageView2/2/w/640/q/90'></img>
                    </div>
                </div>
                <p className='activity'>
                    <span className='firstspan'><img src='/img/icon_title.png'></img></span>
                    <span>精选活动</span>
                </p>
                <NameProduct></NameProduct>
            </Container>
        );
    }
}

export default Luxury;